<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>反向控制</title>
  <!-- import CSS -->
  <link rel="shortcut icon" href="../favicon.ico">
  <link rel="stylesheet" href="../plugins/ElementUI/index-2.3.9.css">
  <link href="../css/common.css" rel="stylesheet">
  <!-- import Vue before Element -->
  <script src="../plugins/ElementUI/vue-2.5.16.js"></script>
  <!-- import JavaScript -->
  <script src="../plugins/ElementUI/index-2.3.9.js"></script>
  <script src="../plugins/ElementUI/vue-resource.min.js"></script>
  <style>
      [v-cloak] {
          display: none;
      }
  </style>
</head>
<body>
  <div id="app">
    <div v-cloak>
      <h2>反向控制</h2>
      <el-form :inline="true" label-width="100px" class="demo-ruleForm">
        <el-form-item label="vin码：">
          <el-input size="medium" clearable v-model="vinCode"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="medium" type="primary" @click="request_query">确定</el-button>
        </el-form-item>
      </el-form>
      <el-collapse v-model="activeNames" >
        <!--  -->
        <el-collapse-item title="车辆启停" name="0">
          <el-form :inline="true" :model="formInline_0" class="demo-form-inline">
            <el-form-item label="vin码">
              <el-input v-model="formInline_0.vin" clearable size="small" placeholder="vinCode"></el-input>
            </el-form-item>
            <el-form-item label="是否点火">
              <el-select v-model="formInline_0.mode" size="small" placeholder="请选择">
                <el-option label="点火" value="2"></el-option>
                <el-option label="打开" value="1"></el-option>
                <el-option label="关闭" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="formInline_0_click">确认</el-button>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <!--  -->
        <el-collapse-item title="车锁控制" name="1">
          <el-form :inline="true" :model="formInline_1" class="demo-form-inline">
            <el-form-item label="vin码">
              <el-input v-model="formInline_1.vin" clearable size="small" placeholder="vinCode"></el-input>
            </el-form-item>
            <el-form-item label="是否开锁">
              <el-select v-model="formInline_1.mode" size="small" placeholder="请选择">
                <el-option label="开锁" value="1"></el-option>
                <el-option label="闭锁" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="formInline_1_click">确认</el-button>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <!--  -->
        <el-collapse-item title="鸣笛控制" name="2">
          <el-form :inline="true" :model="formInline_2" class="demo-form-inline">
            <el-form-item label="vin码">
              <el-input v-model="formInline_2.vin" clearable size="small" placeholder="vinCode"></el-input>
            </el-form-item>
            <el-form-item label="是否鸣笛">
              <el-select v-model="formInline_2.mode" size="small" placeholder="请选择">
                <el-option label="开始鸣笛" value="1"></el-option>
                <el-option label="禁止鸣笛" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="鸣笛次数">
              <el-slider v-model="formInline_2.honkTimes" :max="255" style="width:150px"></el-slider>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="formInline_2_click">确认</el-button>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="远光灯控制" name="3">
          <el-form :inline="true" :model="formInline_3" class="demo-form-inline">
            <el-form-item label="vin码">
              <el-input v-model="formInline_3.vin" clearable size="small" placeholder="vinCode"></el-input>
            </el-form-item>
            <el-form-item label="是否开启远光灯">
              <el-select v-model="formInline_3.mode" size="small" placeholder="请选择">
                <el-option label="开远光灯" value="1"></el-option>
                <el-option label="关远光灯" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="开启时间">
              <el-slider v-model="formInline_3.highLampTimes" :max="255" style="width:150px"></el-slider>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="formInline_3_click">确认</el-button>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="近光灯控制" name="4">
          <el-form :inline="true" :model="formInline_4" class="demo-form-inline">
            <el-form-item label="vin码">
              <el-input v-model="formInline_4.vin" clearable size="small" placeholder="vinCode"></el-input>
            </el-form-item>
            <el-form-item label="是否开启近光灯">
              <el-select v-model="formInline_4.mode" size="small" placeholder="请选择">
                <el-option label="开近光灯" value="1"></el-option>
                <el-option label="关近光灯" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="开启时间">
              <el-slider v-model="formInline_4.lowLampTimes" :max="255" style="width:150px"></el-slider>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="formInline_4_click">确认</el-button>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="位置灯操作" name="5">
          <el-form :inline="true" :model="formInline_5" class="demo-form-inline">
            <el-form-item label="vin码">
              <el-input v-model="formInline_5.vin" clearable size="small" placeholder="vinCode"></el-input>
            </el-form-item>
            <el-form-item label="是否开启位置灯">
              <el-select v-model="formInline_5.mode" size="small" placeholder="请选择">
                <el-option label="开位置灯" value="1"></el-option>
                <el-option label="关位置灯" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="开启时间">
              <el-slider v-model="formInline_5.placeLampTimes" :max="255" style="width:150px"></el-slider>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="formInline_5_click">确认</el-button>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="闪光灯操作" name="6">
          <el-form :inline="true" :model="formInline_6" class="demo-form-inline">
            <el-form-item label="vin码">
              <el-input v-model="formInline_6.vin" clearable size="small" placeholder="vinCode"></el-input>
            </el-form-item>
            <el-form-item label="是否开闪光灯">
              <el-select v-model="formInline_6.mode" size="small" placeholder="请选择">
                <el-option label="开闪光灯" value="1"></el-option>
                <el-option label="关闪光灯" value="0"></el-option>
                <el-option label="长亮" value="7"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="开启时间">
              <el-slider v-model="formInline_6.flashLampTimes" :max="255" style="width:150px"></el-slider>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="formInline_6_click">确认</el-button>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="车窗操作" name="7">
          <el-form :inline="true" :model="formInline_7" class="demo-form-inline">
            <el-form-item label="vin码">
              <el-input v-model="formInline_7.vin" clearable size="small" placeholder="vinCode"></el-input>
            </el-form-item>

            <el-form-item label="左前窗">
              <el-select v-model="formInline_7.leftFrontWindow" clearable size="small" placeholder="请选择">
                <el-option label="关左前窗" value="1"></el-option>
                <el-option label="开左前窗" value="2"></el-option>
                <el-option label="留缝" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="右前窗">
              <el-select v-model="formInline_7.rightFrontWindow" clearable size="small" placeholder="请选择">
                <el-option label="关右前窗" value="1"></el-option>
                <el-option label="开右前窗" value="2"></el-option>
                <el-option label="留缝" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="左后窗">
              <el-select v-model="formInline_7.leftRearWindow" clearable size="small" placeholder="请选择">
                <el-option label="关左后窗" value="1"></el-option>
                <el-option label="开左后窗" value="2"></el-option>
                <el-option label="留缝" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="右后窗">
              <el-select v-model="formInline_7.rightRearWindow" clearable size="small" placeholder="请选择">
                <el-option label="关右后窗" value="1"></el-option>
                <el-option label="开右后窗" value="2"></el-option>
                <el-option label="留缝" value="3"></el-option>
              </el-select>
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" size="small" @click="formInline_7_click">确认</el-button>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="空调控制" name="8">
          <el-form :inline="true" :model="formInline_8" class="demo-form-inline">
            <el-form-item label="vin码">
              <el-input v-model="formInline_8.vin" clearable size="small" placeholder="vinCode"></el-input>
            </el-form-item>
            <el-form-item label="ac">
              <el-select v-model="formInline_8.ac" clearable size="small" placeholder="请选择">
                <el-option label="启动" value="1"></el-option>
                <el-option label="关闭" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="ad">
              <el-select v-model="formInline_8.ad" clearable size="small" placeholder="请选择">
                <el-option label="启动" value="1"></el-option>
                <el-option label="关闭" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="off">
              <el-select v-model="formInline_8.off" clearable size="small" placeholder="请选择">
                <el-option label="启动" value="1"></el-option>
                <el-option label="关闭" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="damper">
              <el-select v-model="formInline_8.damper" clearable size="small" placeholder="请选择">
                <el-option label="脸" value="0"></el-option>
                <el-option label="脸和脚" value="1"></el-option>
                <el-option label="脚" value="2"></el-option>
                <el-option label="脚和除雾" value="3"></el-option>
                <el-option label="除雾" value="4"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="cycle">
              <el-select v-model="formInline_8.cycle" clearable size="small" placeholder="请选择">
                <el-option label="外循环" value="0"></el-option>
                <el-option label="内循环" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="exTemp">
              <el-input v-model="formInline_8.exTemp" clearable size="small" placeholder="外部温度=数值*0.5-35"></el-input>
            </el-form-item>
            <el-form-item label="inTemp">
              <el-input v-model="formInline_8.inTemp" clearable size="small" placeholder="内部温度=数值*0.5-35"></el-input>
            </el-form-item>
            <el-form-item label="av">
              <el-slider v-model="formInline_8.av" :max="9" style="width:150px"></el-slider>
            </el-form-item>
            <el-form-item label="bd">
              <el-select v-model="formInline_8.bd" clearable size="small" placeholder="请选择">
                <el-option label="关闭" value="0"></el-option>
                <el-option label="打开" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="auto">
              <el-select v-model="formInline_8.auto" clearable size="small" placeholder="请选择">
                <el-option label="关闭" value="0"></el-option>
                <el-option label="打开" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="sTemp">
              <el-input v-model="formInline_8.sTemp" clearable size="small" placeholder="设定温度"></el-input>
            </el-form-item>
            <el-form-item label="heat">
              <el-select v-model="formInline_8.heat" clearable size="small" placeholder="请选择">
                <el-option label="关闭" value="0"></el-option>
                <el-option label="打开" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="remainSTime">
              <el-input v-model="formInline_8.remainSTime" clearable size="small" placeholder="离开启剩余时间,秒,不操作为空"></el-input>
            </el-form-item>
            <el-form-item label="remainETime">
              <el-input v-model="formInline_8.remainETime" clearable size="small" placeholder="离关闭剩余时间,秒,不操作为空"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="formInline_8_click">确认</el-button>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <!-- 空调状态查询 -->
        <el-collapse-item title="空调状态查询" name="9">
          <el-form :inline="true" :model="formInline_9" class="demo-form-inline">
            <el-form-item label="vin码">
              <el-input v-model="formInline_9.vin" clearable size="small" placeholder="vinCode"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="formInline_9_click">确认</el-button>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="行李箱操作" name="10">
          <el-form :inline="true" :model="formInline_10" class="demo-form-inline">
            <el-form-item label="vin码">
              <el-input v-model="formInline_10.vin" clearable size="small" placeholder="vinCode"></el-input>
            </el-form-item>
            <el-form-item label="开行李箱">
              <el-select v-model="formInline_10.mode" size="small" placeholder="请选择">
                <el-option label="开锁" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="formInline_10_click">确认</el-button>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="车辆查询状态" name="11">
          <el-form :inline="true" :model="formInline_11" class="demo-form-inline">
            <el-form-item label="vin码">
              <el-input v-model="formInline_11.vin" clearable size="small" placeholder="vinCode"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="formInline_11_click">确认</el-button>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        
        <el-collapse-item title="寻车操作" name="12">
          <el-form :inline="true" :model="formInline_12" class="demo-form-inline">
            <el-form-item label="vin码">
              <el-input v-model="formInline_12.vin" clearable size="small" placeholder="vinCode"></el-input>
            </el-form-item>
            <el-form-item label="开启寻车">
              <el-select v-model="formInline_12.mode" size="small" placeholder="请选择">
                <el-option label="开" value="1"></el-option>
                <el-option label="关" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="formInline_12_click">确认</el-button>
            </el-form-item>
          </el-form>
        </el-collapse-item>

      </el-collapse>
    </div>
  </div>
</body>
  <script src="../plugins/Underscore/underscore-min.js"></script>
  <script src="../js/ApiRequest.js"></script>
  <script>

    var vm = new Vue({
      el: '#app',
      data: function() {
        return { 
          post:'http://39.104.84.146/upgrade/rest/version/upgrade',
          vinCode:"",
          activeNames: [],//   vin:'' //07B8101790228770
          formInline_0:{},
          formInline_1:{},
          formInline_2:{},
          formInline_3:{},
          formInline_4:{},
          formInline_5:{},
          formInline_6:{},
          formInline_7:{},
          formInline_8:{},
          formInline_9:{},
          formInline_10:{},
          formInline_11:{},
          formInline_12:{},
        }
      },
      mounted:function(){
        Vue.http.interceptors.push(function(request, next){
            var timeout;
          // 這裡改用 _timeout ，就不會觸發原本的
            if (request._timeout) {
              // 一樣綁定一個定時器，但是這裡是只要觸發了，就立即返回 response ， 並且這邊自定義了 status 和 statusText
                timeout = setTimeout(function(){
                    if(request.onTimeout) request.onTimeout(request)
                    request.abort()
                }, request._timeout);
            }
            next(function(response){
                clearTimeout(timeout);
            });
        })
      },
      methods: {
        request_query:function(){

        },
        //请求公共方法
        request:function(data,url){
          this.$http.post('http://39.104.22.46/upgrade/rest/'+url,data,{
            withCredentials: true,
            _timeout:5000,
            onTimeout:function(request){
            	alert('timeout')
            }
          })
          .then(function(response){
            if(response.body.status){
              vm.$message({
                message: response.body.info,
                type: 'success'
              });
              console.log(response.body)
              // alert(JSON.stringify(response.body))
            }else{
              vm.$message.error(response.body.info);
            }
            
          },function(res){
            alert(res.body)
          })
        },
        // 车辆启动
        formInline_0_click: function () {
          var data = {
            vin: this.formInline_0.vin,
            mode: this.formInline_0.mode
          }
          console.log(data)
          this.request(data, "cmd/vehicleActivate")
        },
        // 车锁控制
        formInline_1_click:function(){
          var data = {
            vin:this.formInline_1.vin,
            mode:this.formInline_1.mode
          }
          console.log(data)
          this.request(data,"cmd/lock")
        },
        // 鸣笛控制
        formInline_2_click:function(){
          var data = {
            vin:this.formInline_2.vin,
            mode:this.formInline_2.mode,
            honkTimes:this.formInline_2.honkTimes.toString()
          }
          console.log(data)
          this.request(data,"cmd/honk")
        },
        // 远光灯控制
        formInline_3_click:function(){
          var data = {
            vin:this.formInline_3.vin,
            mode:this.formInline_3.mode,
            highLampTimes:this.formInline_3.highLampTimes.toString()
          }
          console.log(data)
          this.request(data,"cmd/highLamp")
        },
        // 近光灯控制
        formInline_4_click:function(){
          var data = {
            vin:this.formInline_4.vin,
            mode:this.formInline_4.mode,
            lowLampTimes:this.formInline_4.lowLampTimes.toString()
          }
          console.log(data)
          this.request(data,"cmd/lowLamp")
        },
        // 位置灯操作
        formInline_5_click:function(){
          var data = {
            vin:this.formInline_5.vin,
            mode:this.formInline_5.mode,
            placeLampTimes:this.formInline_5.placeLampTimes.toString()
          }
          console.log(data)
          this.request(data,"cmd/placeLamp")
        },
        // 闪光灯操作
        formInline_6_click:function(){
          var data = {
            vin:this.formInline_6.vin,
            mode:this.formInline_6.mode,
            flashLampTimes:this.formInline_6.flashLampTimes.toString()
          }
          console.log(data)
          this.request(data,"cmd/flashLamp")
        },
        // 车窗操作
        formInline_7_click:function(){
          var data = {
            vin:this.formInline_7.vin,
            leftFrontWindow:this.formInline_7.leftFrontWindow,
            rightFrontWindow:this.formInline_7.rightFrontWindow,
            leftRearWindow:this.formInline_7.leftRearWindow,
            rightRearWindow:this.formInline_7.rightRearWindow
          }
          console.log(data)
          this.request(data,"cmd/window")
        },
        // 空调控制
        formInline_8_click:function(){
          var data = {
            vin: this.formInline_8.vin,
            ac: this.formInline_8.ac,
            ad: this.formInline_8.ad,
            off: this.formInline_8.off,
            damper: this.formInline_8.damper,
            cycle: this.formInline_8.cycle,
            exTemp: this.formInline_8.exTemp,
            inTemp: this.formInline_8.inTemp,
            av: this.formInline_8.av.toString(),
            bd: this.formInline_8.bd,
            auto: this.formInline_8.auto,
            sTemp: this.formInline_8.sTemp,
            heat: this.formInline_8.heat,
            remainSTime: this.formInline_8.remainSTime,
            remainETime: this.formInline_8.remainETime,
          }
          console.log(data)
          this.request(data,"cmd/airCondition")
        },
        // 空调状态查询
        formInline_9_click: function () {
          var data = {
            vin: this.formInline_9.vin
          }
          console.log(data)
          this.request(data, "cmd/queryAirConditionState")
        },
        // 行李箱操作
        formInline_10_click:function(){
          var data = {
            vin:this.formInline_10.vin,
            mode:this.formInline_10.mode,
          }
          console.log(data)
          this.request(data,"cmd/luggage")
        }, 
        //车辆状态查询（合并了--车况查询）
        formInline_11_click:function(){
          var data = {
            vin:this.formInline_11.vin,
          }
          console.log(data)
          this.request(data,"cmd/queryState")
        },
        //寻车操作
        formInline_12_click:function(){
          var data = {
            vin:this.formInline_12.vin,
            mode: this.formInline_12.mode,
          }
          console.log(data)
          this.request(data,"cmd/findCar")
        },
      }
    })
  </script>
</html>